<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>探究fullpage</title>
    <script src="jquery-1.8.3.min.js"></script>
    <style>
        .section{
            width: 100%;
            height: 100%;
            position: relative;
            left: 0;
            right: 0;
            display: none;
        }
        .current{
            display: block;
        }
        .menu{
            position: fixed;
            z-index: 999;
            right:0 ;
            top: 50%;
        }
    </style>
</head>
<body>
    <div class="menu">
        <button onclick="up()" >朝上</button>
        <button  onclick="down()">朝下</button>
    </div>
    <div id="fullpage" style="width:100%;height:100%">

        <div class="section current">
            no1
        </div>
        <div class="section">
            no2
        </div>
        <div class="section">
            no3
        </div>


    </div>
    <script>
       
        function up() {
            var cur=$("#fullpage .section.current")
            cur.removeClass("current");
            var pr=cur.prev();
            if (pr.length<1) {
                pr=$("#fullpage .section").last();
            }
            pr.addClass("current");
        }
        function down(){
            var cur=$("#fullpage .section.current")
            cur.removeClass("current");
            var ne=cur.next();
            if (ne.length<1) {
                ne=$("#fullpage .section").first();
            }
            ne.addClass("current");
        }
    
    </script>
</body>
</html>